<template>
	<!-- 定目标 -->
	<view class="set-goals">
		<view class="header-img">
			<u-image width="100%" mode="widthFix" src="@/static/set-goals.png"></u-image>
		</view>

		<view class="goals-list u-skeleton">
			<!-- :url="`./setGoalDetails?sysGoalId=${goal.sysGoalId}`" -->
			<view v-for="(goal,index) in goalList" :key="index" @click="handleJumpIntroduction(goal)">
				<view class="goals-item">
					<view class="goals-image">
						<u-image class="goal-pic" width="100%" mode="widthFix" :src="goal.coverPic"></u-image>
					</view>
					<view class="goals-name">{{ goal.goalName }}</view>
				</view>
			</view>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

		<!-- 加载完 -->
		<!-- <view v-show="pagination.totalCount >= goalList.length" class="finished-loading">
			<u-divider>我是有底线的 凸^-^凸</u-divider>
		</view> -->
	</view>
</template>

<script>
	import {
		getWebGoalList
	} from '@/api/goal.js'
	export default {
		data() {
			return {
				goalList: [], // 目标列表
				loading: false,
				pagination: { // 分页相关
					startIndex: 0,
					length: 15,
					totalCount: 0,
				}
			}
		},

		onLoad() {
			this.handleGetWebGoalList()
		},

		// 上拉加载
		onReachBottom() {
			if (this.pagination.totalCount >= this.goalList.length) return
			this.pagination.startIndex += 1
			this.handleGetWebGoalList()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.goalList = []
			this.pagination.startIndex = 0
			this.handleGetWebGoalList()
		},

		methods: {
			// 获取目标列表
			async handleGetWebGoalList() {
				if (this.loading) return
				try {
					uni.showLoading({
					    title: '加载中'
					});
					this.loading = true
					const data = JSON.stringify(this.pagination)
					const {
						resultData
					} = await getWebGoalList({
						data
					})
					this.goalList = resultData.list
					this.pagination.totalCount = resultData.totalCount
					uni.stopPullDownRefresh()
					this.loading = false
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					this.loading = false
					uni.hideLoading()
				}
			},

			handleJumpIntroduction(goal) {
				console.log(goal)
				// 514 坚持跑步
				// 513 坚持健身
				// 512 坚持练字
				// 511 坚持背单词
				// 510 坚持练书法
				// 509 坚持绘画
				// 508 学习烹饪
				const sysGoalId = goal.sysGoalId
				switch (sysGoalId) {

					case 508:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/cooking?sysGoalId=${sysGoalId}`
						})
						break;
					case 509:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/painting?sysGoalId=${sysGoalId}`
						})
						break;
					case 510:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/practiceCalligraphy?sysGoalId=${sysGoalId}`
						})
						break;
					case 511:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/reciteWords?sysGoalId=${sysGoalId}`
						})
						break;
					case 512:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/calligraphy?sysGoalId=${sysGoalId}`
						})
						break;
					case 513:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/fitness?sysGoalId=${sysGoalId}`
						})
						break;
					case 514:
						uni.navigateTo({
							url: `/pages/insidePages/goalIntroduction/run?sysGoalId=${sysGoalId}`
						})
						break;
				}
				// uni.navigateTo({
				// 	url: `./setGoalDetails?sysGoalId=${goal.sysGoalId}`
				// })
			}
		}
	}
</script>

<style lang="scss">
	.goals-list {
		margin: 0 auto;
		padding: 0 40rpx;
	}

	.goals-image {
		min-height: 400rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.goals-item {
		position: relative;
		margin-bottom: 16rpx;
	}

	.goals-name {
		position: absolute;
		bottom: 24rpx;
		left: 24rpx;
		font-size: 64rpx;
		color: #fff;
	}

	.finished-loading {
		padding-bottom: 40rpx;
	}
</style>
